<template>
  <div>
    <div class="header-container">
      <div class="menu-and-title">
        <h1 class="header-title" onclick="window.location.href='/'">水利知识图谱</h1>
        <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect" router>
          <el-menu-item index="/echarts">知识图谱</el-menu-item>

          <el-menu-item index="/statistics" >知识数据统计</el-menu-item>
          <el-menu-item index="/chat">知识问答</el-menu-item>
          <el-menu-item index="4">关于我们</el-menu-item>
        </el-menu>
      </div>
      <LoginDiv></LoginDiv>

    </div>
    <router-view></router-view>
  </div>


</template>

<style scoped>
.header-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
  padding: 10px 20px; /* 内边距，可根据需要调整 */
  background-color: #ffffff; /* 背景色，可根据需要调整 */
}

.menu-and-title {
  /* 这个类用于包裹菜单和标题，确保它们在同一行 */
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
}

.header-title {
  margin: 0; /* 移除默认的边距 */
  font-size: 24px; /* 字体大小，可根据需要调整 */
  color: #333; /* 字体颜色，可根据需要调整 */
  /* 可以添加一些额外的样式来控制标题和菜单之间的间距 */
  margin-right: 20px; /* 例如，给标题右侧添加一些间距 */
}

.el-menu {
  /* 这里可以添加额外的样式来定制菜单，但通常 Element UI 的样式已经足够 */
}

.button-container {
  /* 这个类用于包裹按钮，并将其定位到容器的右侧 */
}

.button-container .el-button {
  /* 你可以在这里添加额外的按钮样式 */
}
</style>
<script >
import LoginDiv from "./Login/LoginDiv.vue"
export default {
  name:"Index",
  data(){
    return{

    }
  },
  components:{
    LoginDiv
  }
}

</script>